<template>
  <div class="scatter_container">
    <div
      ref="echart"
      class="first"
    ></div>
    <div
      ref="echart2"
      class="second"
    ></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initEchart();
    this.initEchart2();
  },
  methods: {
    initEchart() {
      let echart = this.$echarts.init(this.$refs.echart);
      let option = {
        color: ['blue'], //设置颜色
        title: {
          text: '散点图',
        },
        dataZoom: [
          //区域缩放
          {
            type: 'slider', //x轴下有滑块，可以进行缩放
            xAxisIndex: 0, //作用于第0个x轴
            start: 30, //缩放初始值-开始
            end: 80, //缩放初始值-结束
          },
          {
            type: 'slider', //x轴下有滑块，可以进行缩放
            yAxisIndex: 0, //作用于第0个y轴
          },
          {
            type: 'inside', //鼠标在坐标系范围内滚轮滚动
            xAxisIndex: 0, //作用于第0个x轴
          },
          {
            type: 'inside', //鼠标在坐标系范围内滚轮滚动
            yAxisIndex: 0, //作用于第0个x轴
          },
        ],
        grid: {
          //表格绘制
          show: true, //只是在图形外层增加一个边框
          borderWidth: 5, //表格大小
          borderColor: 'red', //表格颜色
          left: 75, //位置：左
          top: 30, //位置：右
        },
        xAxis: {
          type: 'value',
          scale: true, //轴不是从0开始，从最小值开始
          axisLabel: {
            formatter: '{value} cm',
          },
          splitLine: {
            //分隔线
            show: false,
          },
          position: 'bottom', //x轴位置【'top'、'bottom'】
        },
        yAxis: {
          type: 'value',
          scale: true, //轴不是从0开始，从最小值开始
          axisLabel: {
            formatter: '{value} kg',
          },
          splitLine: {
            //分隔线
            show: false,
          },
          position: 'right', //x轴位置【'left'、'right'】
        },
        series: [
          {
            name: '散点',
            type: 'scatter', //普通散点图
            symbolSize: (args) => {
              //散点大小：根据身高，体重不一样==>显示大小不一样
              let height = args[0] / 100;
              let weight = args[1];
              /*
              身体质量指数（BMI）又称为体重指数、体质指数，
              该指标是通过体重（公斤）除以身高（米）的平方计算得来，这个公式所得比值在一定程度可以反映人体密度。
              */
              let bmi = weight / (height * height);
              if (bmi > 28) {
                //肥胖
                return 20;
              } else {
                return 5;
              }
            },
            itemStyle: {
              color: (args) => {
                //散点颜色：根据身高，体重不一样==>显示颜色不一样
                let height = args.data[0] / 100;
                let weight = args.data[1];
                /*
              身体质量指数（BMI）又称为体重指数、体质指数，
              该指标是通过体重（公斤）除以身高（米）的平方计算得来，这个公式所得比值在一定程度可以反映人体密度。
              */
                let bmi = weight / (height * height);
                if (bmi > 28) {
                  //肥胖
                  return 'red';
                } else {
                  return 'green';
                }
              },
            },
            data: [
              [174, 65.6],
              [175.3, 71.8],
              [193.5, 80.7],
              [186.5, 72.6],
              [187.2, 78.8],
              [181.5, 74.8],
              [184, 86.4],
              [184.5, 78.4],
              [175, 62],
              [184, 81.6],
              [180, 76.6],
              [177.8, 83.6],
              [192, 90],
              [176, 74.6],
              [174, 71],
              [184, 79.6],
              [192.7, 93.8],
              [171.5, 70],
              [173, 72.4],
              [176, 85.9],
              [176, 78.8],
              [180.5, 77.8],
              [172.7, 66.2],
              [176, 86.4],
              [173.5, 81.8],
              [178, 89.6],
              [180.3, 82.8],
              [180.3, 76.4],
              [164.5, 63.2],
              [173, 60.9],
              [183.5, 74.8],
              [175.5, 70],
              [188, 72.4],
              [189.2, 84.1],
              [172.8, 69.1],
              [170, 59.5],
              [182, 67.2],
              [170, 61.3],
              [177.8, 68.6],
              [184.2, 80.1],
              [186.7, 87.8],
              [171.4, 84.7],
              [172.7, 73.4],
              [175.3, 72.1],
              [180.3, 82.6],
              [182.9, 88.7],
              [188, 84.1],
              [177.2, 94.1],
              [172.1, 74.9],
              [167, 59.1],
              [169.5, 75.6],
              [174, 86.2],
              [172.7, 75.3],
              [182.2, 87.1],
              [164.1, 55.2],
              [163, 57],
              [171.5, 61.4],
              [184.2, 76.8],
              [174, 86.8],
              [174, 72.2],
              [177, 71.6],
              [186, 84.8],
              [167, 68.2],
              [171.8, 66.1],
              [182, 72],
              [167, 64.6],
              [177.8, 74.8],
              [164.5, 70],
              [192, 101.6],
              [175.5, 63.2],
              [171.2, 79.1],
              [181.6, 78.9],
              [167.4, 67.7],
              [181.1, 66],
              [177, 68.2],
              [174.5, 63.9],
              [177.5, 72],
              [170.5, 56.8],
              [182.4, 74.5],
              [197.1, 90.9],
              [180.1, 93],
              [175.5, 80.9],
              [180.6, 72.7],
              [184.4, 68],
              [175.5, 70.9],
              [180.6, 72.5],
              [177, 72.5],
              [177.1, 83.4],
              [181.6, 75.5],
              [176.5, 73],
              [175, 70.2],
              [174, 73.4],
              [165.1, 70.5],
              [177, 68.9],
              [192, 102.3],
              [176.5, 68.4],
              [169.4, 65.9],
              [182.1, 75.7],
              [179.8, 84.5],
              [175.3, 87.7],
              [184.9, 86.4],
              [177.3, 73.2],
              [167.4, 53.9],
              [178.1, 72],
              [168.9, 55.5],
              [157.2, 58.4],
              [180.3, 83.2],
              [170.2, 72.7],
              [177.8, 64.1],
              [172.7, 72.3],
              [165.1, 65],
              [186.7, 86.4],
              [165.1, 65],
              [174, 88.6],
              [175.3, 84.1],
              [185.4, 66.8],
              [177.8, 75.5],
              [180.3, 93.2],
              [180.3, 82.7],
              [177.8, 58],
              [177.8, 79.5],
              [177.8, 78.6],
              [177.8, 71.8],
              [177.8, 116.4],
              [163.8, 72.2],
              [188, 83.6],
              [198.1, 85.5],
              [175.3, 90.9],
              [166.4, 85.9],
              [190.5, 89.1],
              [166.4, 75],
              [177.8, 77.7],
              [179.7, 86.4],
              [172.7, 90.9],
              [190.5, 73.6],
              [185.4, 76.4],
              [168.9, 69.1],
              [167.6, 84.5],
              [175.3, 64.5],
              [170.2, 69.1],
              [190.5, 108.6],
              [177.8, 86.4],
              [190.5, 80.9],
              [177.8, 87.7],
              [184.2, 94.5],
              [176.5, 80.2],
              [177.8, 72],
              [180.3, 71.4],
              [171.4, 72.7],
              [172.7, 84.1],
              [172.7, 76.8],
              [177.8, 63.6],
              [177.8, 80.9],
              [182.9, 80.9],
              [170.2, 85.5],
              [167.6, 68.6],
              [175.3, 67.7],
              [165.1, 66.4],
              [185.4, 102.3],
              [181.6, 70.5],
              [172.7, 95.9],
              [190.5, 84.1],
              [179.1, 87.3],
              [175.3, 71.8],
              [170.2, 65.9],
              [193, 95.9],
              [171.4, 91.4],
              [177.8, 81.8],
              [177.8, 96.8],
              [167.6, 69.1],
              [167.6, 82.7],
              [180.3, 75.5],
              [182.9, 79.5],
              [176.5, 73.6],
              [186.7, 91.8],
              [188, 84.1],
              [188, 85.9],
              [177.8, 81.8],
              [174, 82.5],
              [177.8, 80.5],
              [171.4, 70],
              [185.4, 81.8],
              [185.4, 84.1],
              [188, 90.5],
              [188, 91.4],
              [182.9, 89.1],
              [176.5, 85],
              [175.3, 69.1],
              [175.3, 73.6],
              [188, 80.5],
              [188, 82.7],
              [175.3, 86.4],
              [170.5, 67.7],
              [179.1, 92.7],
              [177.8, 93.6],
              [175.3, 70.9],
              [182.9, 75],
              [170.8, 93.2],
              [188, 93.2],
              [180.3, 77.7],
              [177.8, 61.4],
              [185.4, 94.1],
              [168.9, 75],
              [185.4, 83.6],
              [180.3, 85.5],
              [174, 73.9],
              [167.6, 66.8],
              [182.9, 87.3],
              [160, 72.3],
              [180.3, 88.6],
              [167.6, 75.5],
              [186.7, 101.4],
              [175.3, 91.1],
              [175.3, 67.3],
              [175.9, 77.7],
              [175.3, 81.8],
              [179.1, 75.5],
              [181.6, 84.5],
              [177.8, 76.6],
              [182.9, 85],
              [177.8, 102.5],
              [184.2, 77.3],
              [179.1, 71.8],
              [176.5, 87.9],
              [188, 94.3],
              [174, 70.9],
              [167.6, 64.5],
              [170.2, 77.3],
              [167.6, 72.3],
              [188, 87.3],
              [174, 80],
              [176.5, 82.3],
              [180.3, 73.6],
              [167.6, 74.1],
              [188, 85.9],
              [180.3, 73.2],
              [167.6, 76.3],
              [183, 65.9],
              [183, 90.9],
              [179.1, 89.1],
              [170.2, 62.3],
              [177.8, 82.7],
              [179.1, 79.1],
              [190.5, 98.2],
              [177.8, 84.1],
              [180.3, 83.2],
              [180.3, 83.2],
            ],
          },
        ],
      };
      echart.setOption(option);
    },
    initEchart2() {
      let echart = this.$echarts.init(this.$refs['echart2']);
      let option = {
        color: ['blue'], //设置颜色
        title: {
          text: '涟漪动画散点图',
        },
        xAxis: {
          type: 'value',
          scale: true, //轴不是从0开始，从最小值开始
          axisLabel: {
            formatter: '{value} cm',
          },
          splitLine: {
            //分隔线
            show: true,
          },
        },
        yAxis: {
          type: 'value',
          scale: true, //轴不是从0开始，从最小值开始
          axisLabel: {
            formatter: '{value} kg',
          },
          splitLine: {
            //分隔线
            show: true,
          },
        },
        series: [
          {
            name: '散点',
            type: 'effectScatter', //涟漪动画散点图
            showEffectOn: 'emphasis', //配置何时显示特效['render' 绘制完成后显示特效,'emphasis' 高亮（hover）的时候显示特效]
            rippleEffect: {
              //涟漪特效相关配置
              scale: 3, //动画中波纹的最大缩放比例
            },
            symbolSize: (args) => {
              //散点大小：根据身高，体重不一样==>显示大小不一样
              let height = args[0] / 100;
              let weight = args[1];
              /*
              身体质量指数（BMI）又称为体重指数、体质指数，
              该指标是通过体重（公斤）除以身高（米）的平方计算得来，这个公式所得比值在一定程度可以反映人体密度。
              */
              let bmi = weight / (height * height);
              if (bmi > 28) {
                //肥胖
                return 20;
              } else {
                return 5;
              }
            },
            itemStyle: {
              color: (args) => {
                //散点颜色：根据身高，体重不一样==>显示颜色不一样
                let height = args.data[0] / 100;
                let weight = args.data[1];
                /*
              身体质量指数（BMI）又称为体重指数、体质指数，
              该指标是通过体重（公斤）除以身高（米）的平方计算得来，这个公式所得比值在一定程度可以反映人体密度。
              */
                let bmi = weight / (height * height);
                if (bmi > 28) {
                  //肥胖
                  return 'red';
                } else {
                  return 'green';
                }
              },
            },
            data: [
              [174, 65.6],
              [175.3, 71.8],
              [193.5, 80.7],
              [186.5, 72.6],
              [187.2, 78.8],
              [181.5, 74.8],
              [184, 86.4],
              [184.5, 78.4],
              [175, 62],
              [184, 81.6],
              [180, 76.6],
              [177.8, 83.6],
              [192, 90],
              [176, 74.6],
              [174, 71],
              [184, 79.6],
              [192.7, 93.8],
              [171.5, 70],
              [173, 72.4],
              [176, 85.9],
              [176, 78.8],
              [180.5, 77.8],
              [172.7, 66.2],
              [176, 86.4],
              [173.5, 81.8],
              [178, 89.6],
              [180.3, 82.8],
              [180.3, 76.4],
              [164.5, 63.2],
              [173, 60.9],
              [183.5, 74.8],
              [175.5, 70],
              [188, 72.4],
              [189.2, 84.1],
              [172.8, 69.1],
              [170, 59.5],
              [182, 67.2],
              [170, 61.3],
              [177.8, 68.6],
              [184.2, 80.1],
              [186.7, 87.8],
              [171.4, 84.7],
              [172.7, 73.4],
              [175.3, 72.1],
              [180.3, 82.6],
              [182.9, 88.7],
              [188, 84.1],
              [177.2, 94.1],
              [172.1, 74.9],
              [167, 59.1],
              [169.5, 75.6],
              [174, 86.2],
              [172.7, 75.3],
              [182.2, 87.1],
              [164.1, 55.2],
              [163, 57],
              [171.5, 61.4],
              [184.2, 76.8],
              [174, 86.8],
              [174, 72.2],
              [177, 71.6],
              [186, 84.8],
              [167, 68.2],
              [171.8, 66.1],
              [182, 72],
              [167, 64.6],
              [177.8, 74.8],
              [164.5, 70],
              [192, 101.6],
              [175.5, 63.2],
              [171.2, 79.1],
              [181.6, 78.9],
              [167.4, 67.7],
              [181.1, 66],
              [177, 68.2],
              [174.5, 63.9],
              [177.5, 72],
              [170.5, 56.8],
              [182.4, 74.5],
              [197.1, 90.9],
              [180.1, 93],
              [175.5, 80.9],
              [180.6, 72.7],
              [184.4, 68],
              [175.5, 70.9],
              [180.6, 72.5],
              [177, 72.5],
              [177.1, 83.4],
              [181.6, 75.5],
              [176.5, 73],
              [175, 70.2],
              [174, 73.4],
              [165.1, 70.5],
              [177, 68.9],
              [192, 102.3],
              [176.5, 68.4],
              [169.4, 65.9],
              [182.1, 75.7],
              [179.8, 84.5],
              [175.3, 87.7],
              [184.9, 86.4],
              [177.3, 73.2],
              [167.4, 53.9],
              [178.1, 72],
              [168.9, 55.5],
              [157.2, 58.4],
              [180.3, 83.2],
              [170.2, 72.7],
              [177.8, 64.1],
              [172.7, 72.3],
              [165.1, 65],
              [186.7, 86.4],
              [165.1, 65],
              [174, 88.6],
              [175.3, 84.1],
              [185.4, 66.8],
              [177.8, 75.5],
              [180.3, 93.2],
              [180.3, 82.7],
              [177.8, 58],
              [177.8, 79.5],
              [177.8, 78.6],
              [177.8, 71.8],
              [177.8, 116.4],
              [163.8, 72.2],
              [188, 83.6],
              [198.1, 85.5],
              [175.3, 90.9],
              [166.4, 85.9],
              [190.5, 89.1],
              [166.4, 75],
              [177.8, 77.7],
              [179.7, 86.4],
              [172.7, 90.9],
              [190.5, 73.6],
              [185.4, 76.4],
              [168.9, 69.1],
              [167.6, 84.5],
              [175.3, 64.5],
              [170.2, 69.1],
              [190.5, 108.6],
              [177.8, 86.4],
              [190.5, 80.9],
              [177.8, 87.7],
              [184.2, 94.5],
              [176.5, 80.2],
              [177.8, 72],
              [180.3, 71.4],
              [171.4, 72.7],
              [172.7, 84.1],
              [172.7, 76.8],
              [177.8, 63.6],
              [177.8, 80.9],
              [182.9, 80.9],
              [170.2, 85.5],
              [167.6, 68.6],
              [175.3, 67.7],
              [165.1, 66.4],
              [185.4, 102.3],
              [181.6, 70.5],
              [172.7, 95.9],
              [190.5, 84.1],
              [179.1, 87.3],
              [175.3, 71.8],
              [170.2, 65.9],
              [193, 95.9],
              [171.4, 91.4],
              [177.8, 81.8],
              [177.8, 96.8],
              [167.6, 69.1],
              [167.6, 82.7],
              [180.3, 75.5],
              [182.9, 79.5],
              [176.5, 73.6],
              [186.7, 91.8],
              [188, 84.1],
              [188, 85.9],
              [177.8, 81.8],
              [174, 82.5],
              [177.8, 80.5],
              [171.4, 70],
              [185.4, 81.8],
              [185.4, 84.1],
              [188, 90.5],
              [188, 91.4],
              [182.9, 89.1],
              [176.5, 85],
              [175.3, 69.1],
              [175.3, 73.6],
              [188, 80.5],
              [188, 82.7],
              [175.3, 86.4],
              [170.5, 67.7],
              [179.1, 92.7],
              [177.8, 93.6],
              [175.3, 70.9],
              [182.9, 75],
              [170.8, 93.2],
              [188, 93.2],
              [180.3, 77.7],
              [177.8, 61.4],
              [185.4, 94.1],
              [168.9, 75],
              [185.4, 83.6],
              [180.3, 85.5],
              [174, 73.9],
              [167.6, 66.8],
              [182.9, 87.3],
              [160, 72.3],
              [180.3, 88.6],
              [167.6, 75.5],
              [186.7, 101.4],
              [175.3, 91.1],
              [175.3, 67.3],
              [175.9, 77.7],
              [175.3, 81.8],
              [179.1, 75.5],
              [181.6, 84.5],
              [177.8, 76.6],
              [182.9, 85],
              [177.8, 102.5],
              [184.2, 77.3],
              [179.1, 71.8],
              [176.5, 87.9],
              [188, 94.3],
              [174, 70.9],
              [167.6, 64.5],
              [170.2, 77.3],
              [167.6, 72.3],
              [188, 87.3],
              [174, 80],
              [176.5, 82.3],
              [180.3, 73.6],
              [167.6, 74.1],
              [188, 85.9],
              [180.3, 73.2],
              [167.6, 76.3],
              [183, 65.9],
              [183, 90.9],
              [179.1, 89.1],
              [170.2, 62.3],
              [177.8, 82.7],
              [179.1, 79.1],
              [190.5, 98.2],
              [177.8, 84.1],
              [180.3, 83.2],
              [180.3, 83.2],
            ],
          },
        ],
      };
      echart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.scatter_container {
  height: 100%;
  .first {
    height: 50%;
    // background-color: red;
  }
  .second {
    height: 50%;
  }
}
</style>